//pragma Singleton
import QtQuick 2.0
import QtQuick.Controls

Item{
    id: root
    property string name: "" //property name
    property string type: "" //property type
    property var value: null //property value

    implicitHeight: Theme.ratio * 50

    Rectangle {
        id: textProperty
        height: parent.height
        width: parent.width * 0.5
        color: "transparent"
//        border.color: Theme.primaryColor
//        border.width: 1
        Text{
            anchors.fill: parent
            anchors.margins: Theme.doublePadding
            verticalAlignment: Text.AlignVCenter //垂直
            horizontalAlignment: Text.AlignRight //水平
            color: Theme.textColor
            text: name
        }
    }

    Loader{
        anchors.left: textProperty.right
        anchors.right: parent.right
        height: parent.height
        sourceComponent: delegateComponent(type)
    }

    //支持的属性类型 bool color double font int list real rect size string
    Component{
        id: cmpBool
        Rectangle{
            anchors.fill: parent
            color: "transparent"
            AbstractButton{
                id: btn
                anchors.left: parent.left
                anchors.leftMargin: Theme.doublePadding
                anchors.verticalCenter: parent.verticalCenter
                height: Theme.controlHeight
                width: height * 2
                checkable: true
                checked: root.value
                onCheckedChanged: root.value = checked
                contentItem: Rectangle{
                    color: btn.checked ? Theme.primaryColor : Theme.contrlBackgroundColor
                    border.color: Theme.borderColor
                    border.width: Theme.borderWidth
                    radius: btn.height / 2

                    Rectangle{
                        width: parent.height - Theme.doublePadding
                        height: width
                        radius: width /  2
                        color: "white"
                        anchors.verticalCenter: parent.verticalCenter
                        x: !btn.checked ? Theme.padding : (btn.width - width - Theme.padding)
                        Behavior on x{ NumberAnimation{
                                duration: Theme.animationDuration
                                easing.type: Easing.InOutQuart
                            }
                        }
                    }
                }
            }
        }
    }

    Component{
        id: cmpLineInput
        Rectangle{
            anchors.fill: parent
            anchors.margins: Theme.doubleMargin
            color: Theme.contrlBackgroundColor
            border.color: Theme.borderColor
            border.width: 1
            radius: Theme.radius
            clip: true
            TextInput{
                anchors.fill: parent
                anchors.margins: Theme.margin
                verticalAlignment: TextInput.AlignVCenter
                color: Theme.textColor
                selectByMouse: true
                selectionColor: Theme.selectBackgroundColor
                onTextChanged: value = text
                Component.onCompleted: text = value
            }
        }
    }

    Component{
        id: cmpText
        Text{
            anchors.fill: parent
            anchors.margins: Theme.doublePadding
            horizontalAlignment: Text.AlignLeft
            verticalAlignment: Text.AlignVCenter
            color: Theme.textColor
            text: String("%1 (%2)").arg(value).arg(type)
        }
    }

    Component{
        id: cmpInt
        Rectangle{
            anchors.fill: parent
            anchors.margins: Theme.doubleMargin
            color: Theme.contrlBackgroundColor
            border.color: Theme.borderColor
            border.width: 1
            radius: Theme.radius
            clip: true
            SpinBox{
                onValueChanged: root.value = value
                Component.onCompleted: value = root.value
            }
        }
    }

    function delegateComponent(type){
        switch(type){
        case "boolean":
            return cmpBool;
        case "string":
            return cmpLineInput;
        case "number":
            return cmpInt;
        default:
            return cmpText;
        }
    }
}
